<!DOCTYPE html>
<html>
<head>
<title>授权页面</title>
<link th:replace="common/common_css" />
<link rel="stylesheet" th:href="@{/static/js/plugin/jquery-treegrid/css/jquery.treegrid.css}" />
<link rel="stylesheet" th:href="@{/static/js/plugin/icheck/skins/minimal/blue.css}" />
</head>
<body>
<div class="container-fluid">
	<input type="hidden" th:value="${roleId}" id="roleId" />
	<table class="table treetable tree table-bordered table-striped table-condensed">
		<thead>
        <tr>
            <th>&nbsp;<input type="checkbox" aid="0" />&nbsp;菜单</th>
            <th>菜单中的权限</th>
        </tr>
        </thead>
        <tbody>
        	<tr th:each="authority: ${authorities}" 
        		th:class="'treegrid-' + ${authority.id}" 
        		th:classappend="${authority.pid} == 0 ? '' : 'treegrid-parent-' + ${authority.pid}">
        		<td>&nbsp;<input type="checkbox" itype="menu" th:value="${authority.id}" th:text="'&nbsp;'+${authority.name}" th:attr="aid=${authority.id}, pid=${authority.pid}"/></td>
	            <td>
	            	<input type="checkbox" th:value="${auth.id}" th:each="auth: ${authority.authorities}" th:text="'&nbsp;'+${auth.name}+'&nbsp;'" 
	            		th:attr="pid=${auth.pid}, aid='r'+${auth.id}" itype="resource" />
	            </td>
        	</tr>
        </tbody>
	</table>
	<div class="b-form-div">
    	<div class="layui-layer-btn layui-layer-btn-c"><a class="layui-layer-btn0 b-btn-save">保存</a><a class="layui-layer-btn1 b-btn-cancel">取消</a></div>
	</div>
</div>
</body>
<script th:replace="common/common_js"></script>
<script type="text/javascript" th:src="@{/static/js/plugin/jquery-treegrid/js/jquery.treegrid.min.js}"></script>
<script type="text/javascript" th:src="@{/static/js/plugin/jquery-treegrid/js/jquery.treegrid.bootstrap3.js}"></script>
<script type="text/javascript" th:src="@{/static/js/plugin/icheck/icheck.min.js}"></script>
<script type="text/javascript">
$(function() {
	$('input[type="checkbox"]').iCheck({
		labelHover : false,
		cursor : true,
		checkboxClass : 'icheckbox_minimal-blue',
		radioClass : 'icheckbox_minimal-blue',
		increaseArea : '10%' 
	});
	
	$.get('config',{roleId:$('#roleId').val()}, function(res) {
		$.each(res.menuIds, function(index, item) {
			$('input[aid='+item+']').iCheck('check');
		});
		$.each(res.authIds, function(index, item) {
			item = 'r' + item;
			$('input[aid='+item+']').iCheck('check');
		});
	})
	
	$('.tree').treegrid({
            initialState:'expanded',
            expanderExpandedClass: 'glyphicon glyphicon-minus',
            expanderCollapsedClass: 'glyphicon glyphicon-plus'
        });
	
	var ancestors = null;
	var descendants = null;
	//全选/反选
	$('input[type=checkbox]').on('ifClicked', function(event){
		var aid = $(this).attr('aid');
		if(aid == '0') {
			$('input[type=checkbox][aid!='+aid+']').iCheck('check');
		}else {
			if(false == $(this).prop('checked')) {
				ancestors = [];
				descendants = [];
				recursiveAncestor($(this));
				recursiveDescendant($(this));
				arrChecked(ancestors, descendants);
			}
		}
	}).on('ifUnchecked', function(event){
		var id = $(this).attr('aid');
		if(id != null) {
			$('input[pid='+id+']').iCheck('uncheck');
		}
	});
	
	function arrChecked(a, d) {
		$.each(a, function(index, item) {
			$('input[aid='+item+']').iCheck('check');
		});
		$.each(d, function(index, item) {
			$('input[aid='+item+']').iCheck('check');
		});
	}
	
	function recursiveDescendant($checkbox) {
		var aid = $checkbox.attr('aid');
		var $childCheckbox = $('input[pid='+aid+']');
		if($childCheckbox != null) {
			$childCheckbox.each(function(index, item){
				descendants.push($(item).attr('aid'));
				recursiveDescendant($(item));
			});
		}
	}
	
	function recursiveAncestor($checkbox) {
		var pid = $checkbox.attr('pid');
		if(pid != null) {
			ancestors.push(pid);
			recursiveAncestor($('input[aid='+pid+']'));
		}
	}
	
	//授权处理
	$('.b-btn-save').click(function() {
		var menus = [];
		var resources = [];
		$('input:checked').each(function(index, item) {
			var $checkbox = $(item);
			var itype = $checkbox.attr('itype');
			if(itype == 'menu') {
				menus.push($checkbox.val());
			}
			if(itype == 'resource') {
				resources.push($checkbox.val());
			}
		});
		var roleId = $('#roleId').val();
		var json = {
			roleId: roleId,
			menuIds:menus,
			authIds:resources
		}
		$.loadReq({
			type:'post',
			url:'config',
			data:json,
			success: function(res) {
				if(res.status == 'true') {
					utils.palert('添加成功', function() {
						utils.closeLayer();
					});
				} else {
					utils.palert(res.msg);
				}
			}
		});
	});
	
});
</script>
</html>